<template>
	<el-dialog
		class="dialog-wrapper"
		:visible.sync="showDialog"
		:show-close="false"
		:close-on-click-modal="false"
		width="500px"
		center>
		<div class="header" slot="title">
			<p
				class="icon"
				v-if="dialogType === 'error' || dialogType === 'warn'"
				:class="dialogType">
				<i class="el-icon-warning"></i>
			</p>
			<p class="title">{{title}}</p>
		</div>
		<p v-if="content" class="cont">{{content}}</p>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel()">{{cancelText}}</el-button>
			<el-button size="small" type="primary" @click="confirm()">{{confirmText}}</el-button>
		</span>
	</el-dialog>
</template>
<script>
export default {
  props: {
    dialogType: {
      type: String,
      default: 'error'
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确 定'
    },
    cancelText: {
      type: String,
      default: '取 消'
    }
  },
  data () {
    return {
      showDialog: true
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    confirm () {
      this.$emit('confirm')
    }
  }
}
</script>
<style lang="stylus" scoped>
.dialog-wrapper
	>>> .el-dialog
		min-width 400px
		position absolute
		top 10%
		left 50%
		transform translate(-50%, 0)
	>>> .el-dialog__header
		padding 30px 20px 20px
		border none
	>>> .el-dialog__body
		padding 0
	>>> .el-dialog__footer
		padding 15px 20px 35px
		.dialog-footer
			padding 0
			border none
	.header
		padding 0
		.icon
			font-size 60px
			&.error
				color rgb(255, 80, 80)
			&.warn
				color #E6A23C
		.title
			// height 20px
			line-height 20px
			font-size 16px
			font-weight 700
			color rgb(89,89,97)
			margin-top 10px
	.cont
		text-align center
		font-size 12px
		color #868686
	.dialog-footer
		margin-top 10px
</style>
